<template>
	<view>
		<view class="hav">
			<view v-if="isshow" class="Mask">
				<view class="Signin">
					<view class="pic">
						<image src="../../static/img/Signs.png" mode="widthFix"></image>
					</view>
					<view class="add">
						<image src="../../static/img/add.png" mode="widthFix" class="addpic"></image>
						<span>+{{times}}</span>
					</view>
					<h1>签到成功!</h1>
					<h2>已连续签到{{times}}天</h2>
					<button type="default" @click="ifshow">确 定</button>
				</view>
			</view>
			<view class="touxiaing">
				<image :src="userinfo.avatarUrl"></image>
			</view>
			<view class="userName">
				<text>{{userinfo.nickName}}</text>
			</view>

			<view class="qiandao">
				<image src="../../static/img/integral.png" @click="chaneged()" v-show="integralchange"></image>
				<image src="../../static/img/nointegral.png" v-show="!integralchange" @click="chaneged()"></image>
				<text class="integral" v-show="!integralchange" @click="chaneged()">{{integral}}</text>
			</view>

			<view class="staic" v-if="Pregnancy!==''">
				<!-- <text>目前状态：</text><br> -->
				<text id="static_1">距离孕产期还有:<text class="time1">{{Pregnancy}}</text>天</text>
				<image src="../../static/yunqi.png" mode="heightFix" @click="setup()"></image>
			</view>
			<view class="staic" v-else>
				目前状态：请设置孕产期！<image src="../../static/img/fit.png" mode="heightFix" @click="setup()"></image>
			</view>

			<view>
				<text class="time_qiandao">你已经连续签到:<text class="time1"> {{times}} </text>天啦!</text>
			</view>

			<view>
				<text class="time_qiandao">当前积分:<text class="time1">{{integral}}</text>分</text>
			</view>
		</view>

		<view class="content">
			<view class="jifen" v-for="item in text" :key="text.id">
				<image class="jifenduihuan" :src='item.img'></image>
				<image class='jiantou' :src="item.img1"></image>
				<navigator hover-class="none" class="ngr" :url="item.url" @click="item.url==='#'?logout():''">
					{{item.text}}
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "my-userinfo",
		data() {
			return {
				integralchange: true,
				isshow: false,
				times: '',
				integral: 0,
				Pregnancy: '',
				num: 1,
				text: [{
						id: 1,
						text: '兑换商城',
						url: '../../subpkg/integral_mall/integral_mall',
						img:'../../static/jfdh.png',
						img1:'../../static/jiantou.png'
					},
					{
						id: 2,
						text: '关于我们',
						url: '../../subpkg/about_us/about_us',
						img:'../../static/gywm.png',
						img1:'../../static/jiantou.png'
					},
					{
						id: 3,
						text: '退出登录',
						url: '#',
						img:'../../static/tcdl.png',
						img1:'../../static/jiantou.png'
					},
				],
			}
		},
		props: {
			change: {
				type: Number
			}
		},
		onPullDownRefresh() {
			//下拉刷新触发的事件
			setTimeout(() => {
				uni.stopPullDownRefresh() //两秒后停止下拉刷新
			}, 1000)
		},
		created() {
			this.questing()
		},
		computed: {
			...mapState('m_user', ['userinfo', 'token']),
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken']),
			async logout() {
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗？'
				}).catch(err => err)
				if (succ && succ.confirm) {
					this.updateUserInfo({})
					this.updateToken('')
				}
			},
			ifshow() {
				this.isshow = false
			},
			chaneged() {
				this.integralchange = !this.integralchange
			},

		
			async questing() {
				if(uni.getStorageSync('token').JseSsionId!==''){
				// 请求签到数据
				uni.request({
					//api地址
					url: 'https://anmti.cn/canlogin/sinInTimes',
					//设置请求类型等于外部传入类型
					method: 'get',
					//配置请求头信息
					header: {
						"Cookie": "JSESSIONID=" + uni.getStorageSync('token').JseSsionId,
					},
					//请求成功
					success: (res) => {
						console.log(res);
						if(res.data==='nologin,canlogin'){
							this.updateToken('')
							return uni.$showMsg('请重新登录！')
						}
						this.times = res.data.times
						this.integral = res.data.integral
						if (!res.data.todaysigned)
							this.isshow = true

					},
					//请求失败
					fail: (err) => {
						console.log(err);
					},
				})
				}
				// 请求预产期数据
				uni.request({
					//api地址
					url: 'https://anmti.cn/canlogin/getExpectedDays',
					//设置请求类型等于外部传入类型
					method: 'get',
					//配置请求头信息
					header: {
						"Cookie": "JSESSIONID=" + uni.getStorageSync('token').JseSsionId,
					},
					//请求成功
					success: (res) => {
						console.log(res);
						this.Pregnancy=res.data.days
					},
					//请求失败
					fail: (err) => {
						console.log(err);
					},
				})


			},
			setup() {
				uni.navigateTo({
					url: "../../subpkg/Calculator/Calculator"
				})
			}

		},
		watch: {
			change(nvalue, ovalue) {
				this.questing()
				// this.getExpectedDays()
			},
		},



	}
</script>

<style lang="scss">
	.hav {
		background: #FFE4E1;
		height: 350rpx;
		width: 750rpx;
	}

	.touxiaing {
		position: relative;
		top: 54rpx;
		left: 50rpx;
		width: 130rpx;
		height: 130rpx;
		border-radius: 25px;
		background: #FFFFFF;
	}

	.touxiaing image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 20px;
	}

	.userName {
		position: relative;
		top: -50rpx;
		left: 220rpx;
		font-size: 35rpx;
		font-weight: 1000;
		// color: #EE6AA7;
		color: 	#545454;
	}

	.qiandao {
		position: relative;
		left: 50rpx;
		width: 150rpx;
		height: 140rpx;
	}

	.qiandao image {
		width: 120rpx;
		height: 120rpx;
	}

	.staic {
		position: relative;
		left: 220rpx;
		top: -160rpx;
		font-size: 30rpx;
		font-weight: 500;
		// color: #EE6AA7;
		color: 	#545454;
	}

	.staic image {
		width: 50rpx;
		height: 50rpx;
		vertical-align: bottom;
	}

	.staic button {
		display: inline-block;
		vertical-align: middle;
		width: 220rpx;
		height: 50rpx;
		border-radius: 20rpx;
		line-height: 50rpx;
		font-size: 30rpx;
	}
	.content{
		background: rgba(255,192,203,0.2);
		height: 430px;
	}
	.jifen {
		width:710rpx;
		position: relative;
		top: 40rpx;
		left: 10px;
		border-radius: 20px;
		background:white;
		height: 100rpx;
		text-align: center;
		margin-bottom: 50rpx;
	}

    .jifenduihuan{
		position: relative;
		top: 10px;
		left: -120px;
		width: 38px;
		height: 38px;
	}
	
	.jifen .ngr {
		position: relative;
		top: -26px;
		left: -50px;
		// color: #EE6AA7;
		color: 	#545454;
		font-size: 17px;
		// font-weight: bold;
	}
	.jiantou{
		width: 32px;
		height:32px;
		position: relative;
		top: 10px;
		left: 120px;
	}
	#jiantou {
		width: 30rpx;
		height: 30rpx;
	}

	#span {
		font-size: 25rpx;
	}

	.time_qiandao {
		position: relative;
		// color: #EE6AA7;
		color: 	#545454;
		font-size: 30rpx;
		left: 120px;
		top: -85px;
	}
	.time1{
		font-size: 22px;
		color:#EE6AA7 ;
		// color: 	#545454;
	}
	.time_qiandao1 {
		position: relative;
		color: #EE6AA7;
		font-size: 30rpx;
		left: -30px;
		top: -40px;
	}

	#static_1 {
		font-weight: bold;
	}

	.Mask {
		width: 100%;
		height: 100%;
		z-index: 999;
		position: absolute;
		top: 0;
		left: 0;
	}

	.Signin {
		position: relative;
		left: 125rpx;
		top: 350rpx;
		width:500rpx;
		height: 320rpx;
		background-color:white;
		border-radius: 15rpx;
		border: 1px solid #feeeed;
		color: #ff1b89;

		h1 {
			display: inline-block;
			width: 100%;
			text-align: center;
			margin-top: 15rpx;
			font-size: 30rpx;
		}

		h2 {
			display: inline-block;
			width: 100%;
			text-align: center;
			margin-top: 10rpx;
			font-size: 25rpx;
		}

		button {
			position: absolute;
			left: 10%;
			width: 80%;
			bottom: 10rpx;
			font-size: 25rpx;
			background-color: #f05b72;
			color: white;
		}
	}

	.pic {
		width: 100rpx;
		position: absolute;
		left: 200rpx;
		top: -25rpx;
	}

	.pic image {
		width: 200rpx;
	}

	.add .addpic {
		width: 60rpx;
		vertical-align: bottom;
	}

	.add {
		width: 110rpx;
		margin: 0rpx auto;
		margin-top: 80rpx;
	}

	.add span {
		color: #ff1b89;
		font-size: 40rpx;
	}

	.integral {
		position: absolute;
		top: 36rpx;
		left: 12rpx;
		font-size: 50rpx;
		width: 96rpx;
		text-align: center;
		color: white;
	}
</style>
